<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
// 创建
class Demo extends React.Component {
  state = {isHot: true}

  changeWeather=()=>{
    this.setState({isHot: !this.state.isHot})
  }

  // class 绑定写法 
  saveInfo=(c)=>{
    this.input1 = c; 
    console.log("hello", c)
  }

  showInfo=()=>{
    const {input1} = this
    alert(input1.value)
  }

  render(){
    const {isHot} = this.state
    return (
      <div>
        <h2>今天天气很{isHot?"热":"凉爽"}</h2>
        {/* 此种写法内联，在状态更新的时候，ref回调会执行两次，第一次会将ref对象清楚所以输出的是 “hello” null, 第二次重新渲染“hello” , input 对象*/}
        {/*<input type="text"  ref={c => {this.input1 = c; console.log("hello", c)}} placeholder="点击按钮提示数据"/>*/}
        {/* 绑定写法，ref回调会执行一次，*/}
        <input type="text"  ref={this.saveInfo} placeholder="点击按钮提示数据"/>
        <button ref="button100" onClick={this.showInfo}>点我提示左侧数据</button>
        <button onClick={this.changeWeather}>点我切换天期</button>
        </div>
    )
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'))
</script>
</html>
